<template>
  <!-- 搜索区域 -->
  <div class="main-content">

<!--    <el-input :class="{'rounded-input': true}" prefix-icon="el-icon-search" v-model="name"-->
<!--              placeholder="在这里输入你要找的软件" style="width: 260px;margin-right: 8px;margin-left: 30px;"-->
<!--              @keyup.enter.native="searchBoxHandler()"-->
<!--              clearable></el-input>-->
<!--    <el-button class="el-button" size="mini" round plain type="primary" @click="searchBoxHandler()">-->
<!--      搜索-->
<!--    </el-button>-->

    <div class="my-search-container" :style="{'background-color': bgcolor}" @click="searchBoxHandler">
      <div class="my-search-box" :style="{'border-radius': radius + 'px'}">
        <i icon="el-icon-search"></i>
        <el-input v-model="name" :class="{'rounded-input': true}" placeholder="在这里输入你要找的软件"></el-input>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "MySearch",
  props: {
    // 背景颜色
    bgcolor: {
      type: String,
      default: '#efefef'
    },
    // 圆角尺寸
    radius: {
      type: Number,
      // 单位是 px
      default: 18
    }
  },
  data() {
    return {
      name: ''
    }
  },
  methods: {
    searchBoxHandler() {
      // 触发外界通过 @click 绑定的 click 事件处理函数
      this.$emit('click')
    }
  }
};
</script>

<style scoped>
.main-content {
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中显示 */
}

.my-search-container {
//background-color: #c00000; height: 50px; padding: 0 10px;
  display: flex;
  align-items: center;
}

.my-search-box {
  height: 36px;
  background-color: #ffffff;
//border-radius: 15px; width: 100%; display: flex;
  align-items: center;
  justify-content: center;

  .rounded-input {
    font-size: 15px;
    margin-left: 5px;
  }
}

.rounded-input {
  //background-color: #f2f8fe;
}
</style>